<template>
  <div class="news-list">
    <van-tabs v-model="active" @change="getNews">
      <van-tab title="推荐" name="a">
          <new-list :list="newsList"></new-list>
		  <van-empty v-if="newsList.length === 0" description="暂无内容" />
      </van-tab>
      <van-tab title="农事问题" name="0">
          <new-list :list="newsList"></new-list>
		  <van-empty v-if="newsList.length === 0" description="暂无内容" />
      </van-tab>
      <van-tab title="农情通知" name="1">
          <new-list :list="newsList"></new-list>
		  <van-empty v-if="newsList.length === 0" description="暂无内容" />
      </van-tab>
      <van-tab title="政策解读" name="2">
          <new-list :list="newsList"></new-list>
		  <van-empty v-if="newsList.length === 0" description="暂无内容" />
      </van-tab>
      <van-tab title="天气变化" name="3">
          <new-list :list="newsList"></new-list>
		  <van-empty v-if="newsList.length === 0" description="暂无内容" />
      </van-tab>
    </van-tabs>
  </div> 
</template>

<script>
import { Tab, Tabs, Empty } from 'vant'
import newList from './components/newList'
import API from '../../services/index'
export default {
	name: 'newsList',
	components: {
		VanTab: Tab,
		VanTabs: Tabs,
		VanEmpty: Empty,
		newList,
	},
	data () {
		return {
			active: 'a',
			newsList: [],
		}
	},
	created() {
		this.active = this.$route.query.active + ''
		this.getNews()
	},
	methods: {
		async getNews() {
			let data
			// console.log(this.active)
			if (this.active !== 'a') {
				data = await API.getAgriNews({
					params: {
						colum: this.active,
					},
				})
			} else {
				data = await API.getAgriNewsRecom()
			}
			this.newsList = data.sort((a, b) => a.createTime - b.createTime)
			// console.log(data)
		},
	},
}
</script>

<style lang='scss' scoped>
.news-list{
    padding: 0;
}
</style>
